<template>
  <div class="detail">
    <div class="zhao" v-if="isShow || isTrue"></div>
    <transition>
      <purchase-com v-if="isTrue" @chuan="shou"></purchase-com>
    </transition>
    <transition>
      <notice-what v-if="isShow" :str="msg"></notice-what>
    </transition>
    <div class="detail-top" ref="img"></div>
    <div class="top">
      <div class="top-img">
        <div class="img" ref="img2">
          <span>总票代</span>
        </div>
        <div class="description">
          <h1>{{tickets.name}}</h1>
          <span>￥{{tickets.price}}</span>
        </div>
      </div>
      <p>本商品为预售商品，正式开票后将第一时间为您配送</p>
    </div>
    <div class="top-next">
      <p>
        <span>
          <i class="fa fa-times-circle-o"></i>不支持选座
        </span>
        <span>
          <i class="fa fa-check-circle-o"></i>快递票
        </span>
        <span>
          <i class="fa fa-check-circle-o"></i>纸质发票
        </span>
      </p>
      <p>
        <span>
          {{tickets.date}}
          <i class="el-icon-arrow-right"></i>
        </span>
        <span>演出时长约150分钟（以现场为准）</span>
      </p>
      <div>
        <p>
          <span>{{tickets.address}}</span>
        </p>
        <span class="el-icon-location-information"></span>
      </div>
    </div>

    <div class="mainContent over" ref="content">
      <div class="content">
        <h1>演出介绍</h1>
        <h3>购票须知</h3>
        <p>1、避免影响抢票体验，请您升级到Super麦App最新版本购票。</p>
        <p>2、请您提前在Super麦App后台添加完整个人的购票信息，包括身份证、电话、地址，以方便购票。</p>
        <p>3、因项目火爆，不支持合并配送，不支持不同订单号连座安排，敬请谅解。</p>
        <p>4、对于异常订购行为，Super麦网有权在订单成立或者生效之后取消相应订单。异常订购行为包括但不限于以下情形：</p>
        <p>（1）通过同一ID订购超出限购张数的订单；</p>
        <p>
          （2）经合理判断认为非真实消费者的下单行为，包括但不限于通过批量相同或虚构的支付账号、收货地址（包括下单
          时填写及最终实际收货地址）、收件人、电话号码订购超出限购张数的订单。
        </p>
        <p>5、因项目火爆，本演出不支持修改收货信息，请您务必在下单前检查好您的收货地址。</p>
        <h3>一票一证说明</h3>
        <p>
          因主办方要求本项目实名制购买，一票一证，每个用户限购4张，票品仅支持快递配送（请使用有效身
          份证，支持护照、台胞证和港澳居民往来大陆通行证）；
        </p>
        <p>
          一票一证：指每张门票均需对应不同且首次使用的身份证号码。无论同一订单购买单张或多张门
          票，如您提供的身份证信息已被用于其他购票渠道购买本项目门票（如：Super麦网天猫旗舰店），或出现多张门票重复使用同
          一身份证信息等任何违反一票一证制度的购买行为，Super麦网将会在5个工作日内通过系统原路退回该订单下全部票款，不予配票。
          请您购买前务必选择【不同】且【未被使用在其他购票渠道】的【真实】身份证信息进行购票！
        </p>
        <p>您点击购买本项目票品的行为，视同已详细阅读并认可上述全部购票规则。</p>
      </div>
    </div>
    <p @click="open" ref="p">
      展开更多
      <span class="el-icon-arrow-down"></span>
    </p>
    <div class="content-next" v-show="man.length" v-for="(item,index) in man" :key="index">
      <h1>演出阵容</h1>
      <div class="cast">
        <img :src="item.actorImg" alt />
        <div class="description">
          <p>
            <span>{{item.actorName}}</span>
            <span v-if="isLove==false" @click="love(index)" v-show="item.actorName!='群星'">+关注</span>
            <span v-else @click="del(index)">已关注</span>
          </p>
        </div>
      </div>
    </div>
    <div class="instruction">
      <h1>须知事项</h1>
      <section>
        <h3>购票须知</h3>
        <h5>
          <small class="fa fa-check-circle-o"></small>限购说明
        </h5>
        <p>每个账号做多购买4张</p>
        <h5>
          <small class="fa fa-check-circle-o"></small>实名制
        </h5>
        <p>购买是您需要输入购票人的身份证信息，每张门票对应一个证件号</p>
        <h5>
          <small class="fa fa-check-circle-o"></small>配送信息说明
        </h5>
        <p>本项目不支持修改配送地址，请务必在下单前检查好您的收货地址</p>
        <span @click="shop('购票须知')">全部9条购票须知</span>
      </section>
      <section>
        <h3>观演须知</h3>
        <h5>
          <small class="fa fa-check-circle-o"></small>入场时间
        </h5>
        <p>演出前约120分钟</p>
        <h5>
          <small class="fa fa-check-circle-o"></small>禁止携带物品
        </h5>
        <p>
          1.由于安保和版权的原因，多数演出、展览以及比赛场所禁止携带食品、饮料、专特摄录设备、打火机等物品
          请您注意现场工作人员和广播的提示，予以配合；2.儿童凭全票入场；3.语境验票的票品，禁止二次入场
        </p>
        <h5>
          <small class="fa fa-check-circle-o"></small>寄存说明
        </h5>
        <p>无寄存处，请自行保管携带物品</p>
        <span @click="shop('观演须知')">全部6条观演须知</span>
      </section>
    </div>
    <div class="recommend">
      <h1>为你推荐</h1>

      <section v-for="(ticket , index) in commendList" :key="index" @click="jump(ticket.id)">
        <img :src="ticket.verticalPic" alt />
        <div class="con-Right">
          <h1>{{ticket.name}}</h1>
          <p>{{ticket.address}}/{{ticket.date}}</p>
          <span>￥{{ticket.price}}</span>
        </div>
      </section>
    </div>

    <detail-btm class="detailBtm"></detail-btm>
  </div>
</template>

<script>
import bus from "../bus";
import DetailBtm from "../components/DetailBtm";
import NoticeWhat from "../components/NoticeWhat";
import PurchaseCom from "../components/PurchaseCom";
export default {
  data() {
    return {
      isShow: false,
      isTrue: false,
      msg: "",
      commendList: [],
      tickets: {},
      man: {},
      isLove: false,
    };
  },
  mounted() {
    this.join();
  },
  components: {
    DetailBtm,
    NoticeWhat,
    PurchaseCom,
  },
  methods: {
    isLov() {
      this.axios
        .get(
          "/isLove?user=" +
            this.$store.state.userId +
            "&actor=" +
            this.tickets.actor_id
        )
        .then((res) => {
          if (res.data.code) {
            this.isLove = false;
          } else {
            this.isLove = true;
          }
        });
    },
    open() {
      $(this.$refs.content).removeClass("over");
      $(this.$refs.p).get(0).style.display = "none";
    },
    shop(val) {
      bus.$emit("xuValue", false);
      $(document.body).css({
        "overflow-x": "hidden",
        "overflow-y": "hidden",
      });
      this.isShow = true;
      this.msg = val;
    },
    shou(val) {
      this.isTrue = val;
    },
    jump(val) {
      // 修改演出id，刷新页面并回到顶部
      this.$store.commit("setId", val);
      this.join();
      window.scrollTo(0, 0);
    },
    // 页面加载
    join() {
      // 获取选中演出数据
      this.axios.get("/tick?id=" + this.$store.state.id).then((res) => {
        // 保存演出数据
        this.tickets = res.data.result[0];
        this.$store.commit('date',this.tickets.date)
        if (this.$store.state.isOnline) {
          this.isLov();
        }
        // 修改顶部图
        $(this.$refs.img).get(
          0
        ).style.backgroundImage = `url(${this.tickets.verticalPic})`;

        $(this.$refs.img2).get(
          0
        ).style.backgroundImage = `url(${this.tickets.verticalPic})`;
        // 获取演员数据
        this.axios.get("/man?id=" + this.tickets.actor_id).then((res) => {
          this.man = res.data.result;
        });
      });
      // 获取推荐演出数据（前四个）
      this.axios.get("/active").then((res) => {
        this.commendList = res.data.result;
      });
      bus.$on("closeXu", (val) => {
        this.isShow = false;
      });
      bus.$on("kaiValue", (val) => {
        this.isTrue = true;
      });
    },

    // 添加关注
    love(val) {
      if (this.$store.state.isOnline) {
        // 用户
        let id1 = this.$store.state.userId;
        // 演员
        let id2 = this.man[val].id;
        this.axios
          .post("/love", "userid=" + id1 + "&actorid=" + id2)
          .then((res) => {
            if (res.data.code == 1) {
              this.$message({
                message: res.data.msg,
                type: "success",
                duration: "1000",
              });
            }
            this.isLov()
          }); 
      } else {
        location.href = "#/login";
        window.scrollTo(0, 0);
        this.$message({
          message: "你还没有登录",
          type: "error",
        });
      }
    },
    // 取消关注
    del(val) {
      // 用户
      let id1 = this.$store.state.userId;
      // 演员
      let id2 = this.man[val].id;
      this.axios
        .post("/dellove", "user_id=" + id1 + "&actor_id=" + id2)
        .then((res) => {
          this.$message({
            message: res.data.msg,
            duration: 1000,
          });
          this.isLov();
        });
    },
  },
};
</script>

<style scoped>
.zhao {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.5);
}
.v-enter {
  transform: translateY(500px);
}
.v-leave-to {
  transform: translateY(500px);
}
/*设置标签的过渡样式*/
.v-enter-active,
.v-leave-active {
  transition: 0.5s;
}
.detail {
  position: relative;
  padding-bottom: 70px;
  background-color: #f8f8f8;
}
.detail .detail-top {
  width: 100%;
  height: 300px;
  filter: saturate(1) brightness(1.1) blur(0.6rem) contrast(0.8);
}

.detail .top {
  position: absolute;
  top: 20px;
  left: 20px;
  width:calc(100% - 40px)
}

.detail .top .top-img {
  /*background-color: rgba(0,0,0,0.8);*/
  overflow: hidden;
}
.detail .top .top-img .img {
  background-size: 150px;
  width: 140px;
  height: 200px;
  float: left;
}
.detail .top .top-img .img span {
  background-color: black;
  display: block;
  color: #fff;
  text-align: left;
  font-size: 14px;
  padding: 2px;
  width: 50px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.detail .top .top-img .description {
  float: left;
  width: 35vw;
  margin-left: 40px;
}
.detail .top .top-img .description h1 {
  font-size: 18px;
  color: #fff;
  text-align: left;
}
/* 价格样式 */
.detail .top .top-img .description span {
  position: absolute;
  bottom: calc(3.5vw + 32px);
  color: #fff;
  font-size: 20px;
  display: block;
  text-align: left;
}
.detail .top p {
  color: #f0f0f0;
  margin-top: 20px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 5px 0;
  border-radius: 4px;
  font-size: 3.5vw;
}
.detail .top-next {
  background-color: #fff;
}
.detail .top-next > p:first-child {
  background-color: #e0e0e0;
  padding: 10px 0;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.detail .top-next > p:first-child span {
  margin-right: 30px;
}
.detail .top-next > p:first-child span i {
  color: #ff1268;
  font-size: 18px;
  margin-right: 10px;
}
.detail .top-next > p:nth-child(2) {
  border-bottom: solid 1px #e0e0e0;
  margin: 0 20px;
  padding: 20px 0;
}
.detail .top-next > p:nth-child(2) span {
  display: block;
  text-align: left;
  font-size: 23px;
  font-weight: bolder;
}
.detail .top-next > p:nth-child(2) span:nth-child(2),
.detail .top-next div p span:nth-child(2) {
  color: #999;
  font-weight: normal;
  font-size: 16px;
  margin-top: 5px;
}
.detail .top-next div {
  overflow: hidden;
  padding: 0 20px;
}
.detail .top-next div p {
  float: left;
  text-align: left;
  margin-top: 20px;
}
/* 地址样式 */
.detail .top-next div p span {
  display: block;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bolder;
}
.detail .top-next div > span {
  font-size: 30px;
  padding-left: 10px;
  float: right;
  display: block;
  margin-top: 20px;
  margin-right: 20px;
  border-left: solid 1px #eee;
}
.detail .over {
  height: 200px;
  overflow: hidden;
}
.detail .mainContent .content {
  text-align: left;
  padding: 0 20px;
  background-color: #fff;
  margin-top: 20px;
  padding-bottom: 20px;
}
.detail .mainContent .content h1 {
  padding: 30px 0;
}
.detail .mainContent .content h3 {
  font-size: 14px;
  color: #989898;
}
.detail .mainContent .content p {
  color: #989898;
  line-height: 28px;
}
.detail .mainContent .content img {
  width: 100%;
}
.detail > p {
  background-color: #fff;
  padding: 20px 0;
  font-size: 20px;
  color: #ff1268;
  cursor: pointer;
}
.detail .content-next {
  background-color: #fff;
  text-align: left;
  padding: 0 20px;
}
.detail .content-next h1 {
  margin-bottom: 20px;
}
.detail .content-next .cast {
  padding: 15px 0;
  overflow: hidden;
}
.detail .content-next .cast img {
  width: 100px;
  height:100px;
  border-radius: 50%;
  float: left;
}
.detail .content-next .cast .description {
  float: right;
  width: 70%;
}
/* 演出阵容的样式 */
.detail .content-next .cast .description p span:first-child {
  font-size: 20px;
  margin-left: 10vw;
  color: black;
  padding-top:10px;
}
.detail .content-next .cast .description p span:nth-child(2) {
  padding: 10px 10px;
  margin-top:-10px;
  float: right;
  color: #ff1268;
  border: solid 1px #ff1268;
  border-radius: 20px;
}
.detail .content-next .cast .description p {
  color: #999;
  margin-top: 25px;
  margin-bottom: 10px;
}
.detail .instruction {
  background-color: #fff;
  margin-top: 20px;
  text-align: left;
  padding: 0 20px;
}
.detail .instruction h1 {
  padding-top: 20px;
}
.detail .instruction section {
  border-bottom: solid 1px #f0f0f0;
}
.detail .instruction section h3 {
  margin: 15px 0;
}
.detail .instruction section h5 {
  font-weight: normal;
  font-size: 17px;
  padding: 10px 0;
}
.detail .instruction section h5 small {
  color: #ff1268;
  margin-right: 20px;
}
.detail .instruction section p {
  line-height: 30px;
  color: #989898;
  padding-left: 20px;
}
.detail .instruction section span {
  display: block;
  text-align: center;
  margin: 20px 0;
  color: #ff1658;
  font-size: 17px;
  cursor: pointer;
}
/* 推荐演出 */
.detail .recommend {
  background-color: #fff;
  padding: 0 20px 60px 20px;
  text-align: left;
}
.detail .recommend > h1 {
  padding: 20px 0;
}
.detail .recommend section {
  overflow: hidden;
  margin-top: 20px;
}
.detail .recommend section img {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.detail .recommend section .con-Right {
  float: left;
  width: 60%;
  height: 172px;
}
.detail .recommend section .con-Right h1 {
  font-size: 18px;
  text-align: left;
  margin-bottom: 10px;
}
.detail .recommend section .con-Right p {
  color: #888;
  font-size: 15px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 70px;
}
.detail .recommend section .con-Right span {
  color: #ff1268;
  display: block;
  text-align: left;
  font-size: 18px;
}
</style>
